<template>
  <div>
    <div @click="gotoHome">
      <img src="../static/icon/9.png" alt="" style="width: 16px;height: 16px; margin-right: 10px;"
        v-if="choseIndex == 0">
      首页总览
    </div>
    <div @click="gotoProjectCenter"><img src="../static/icon/10.png" alt=""
        style="width: 16px;height: 16px; margin-right: 10px;" v-if="choseIndex == 0">项目中心</div>
    <div @click="gotoProjectManagement"><img src="../static/icon/11.png" alt=""
        style="width: 16px;height: 16px; margin-right: 10px;" v-if="choseIndex == 0">项目管理</div>
    <div @click="gotoPeopleManagement"><img src="../static/icon/12.png" alt=""
        style="width: 16px;height: 16px; margin-right: 10px;" v-if="choseIndex == 0">人员管理</div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const feature = ref();
    let choseIndex = ref(0);
    const gotoHome = () => {
      choseIndex = 0
      router.push("/");
    };
    const gotoProjectCenter = () => {
      choseIndex = 1
      router.push("/projectCenter");
    };
    const gotoProjectManagement = () => {
      choseIndex = 2

      router.push("/projectManagement");
    };
    const gotoPeopleManagement = () => {
      choseIndex = 3
      router.push("/peopleManagement");
    };

    return {
      gotoHome,
      gotoProjectCenter,
      gotoProjectManagement,
      gotoPeopleManagement,
      choseIndex
    };
  },
};
</script>

<style lang="css" scoped>
div {
  color: white;
}
</style>